<template>
  <view class="page">
    <image src="/static/img/bg.png" mode="widthFix" class="bg" />
    <view class="card1" v-if="!success">
      <view class="detailbox">
        <view class="item"
          ><image src="/static/img/name.png" mode="" class="icon" /> 姓名：xx
        </view>
        <view class="item">
          <image
            src="/static/img/idcard.png"
            mode=""
            class="icon"
          />证件号码：xxxxx
        </view>
        <view class="item">
          <image
            src="/static/img/address.png"
            mode=""
            class="icon"
          />详细地址：xxxxxxx
        </view>
      </view>
      <view class="tip"> 注:需上传身份证照片信息（拍照上传图片均可） </view>
      <view class="btn" @click="getpic"> 拍照/上传图片 </view>
    </view>
    <view class="card2" v-if="success">
      <view class="inputbox">
        <view class="input">
          <image src="/static/img/name.png" mode="" class="icon" />
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入姓名"
            v-model="detail.name"
          />
        </view>

        <view class="select" @click="showRolePicker">
          <view class="selectleft">
            <image src="/static/img/idcard.png" mode="" class="icon" />
            <view>{{ cardTypeName ? cardTypeName : "请选择证件类型" }}</view>
          </view>

          <image src="/static/img/xia.png" mode="" class="xia" />
        </view>
        <view class="input">
          <image src="/static/img/idcard.png" mode="" class="icon" />
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入证件号"
            v-model="detail.id"
          />
        </view>
        <view class="textarea">
          <image src="/static/img/address.png" mode="" class="icon" />
          <textarea
            placeholder="请输入地址"
            placeholder-style="color:#797979"
            v-model="detail.addr"
          />
        </view>
      </view>
      <view class="tip">
        注：请核对您的身份信息，若有错误可直接编辑或重新扫描</view
      >
      <view class="btnbox">
        <view class="btn1" @click="getpic"> 重新上传 </view>
        <view class="btn2" @click="check"> 下一步 </view>
      </view>
    </view>
    <view class="mpvue-picker">
      <page-head :title="title"></page-head>

      <mpvue-picker
        :themeColor="themeColor"
        ref="fmpvuePicker"
        :mode="mode"
        :deepLength="deepLength"
        :pickerValueDefault="fpickerValueDefault"
        @onConfirm="onRoleConfirm"
        :pickerValueArray="fpickerValueArray"
      ></mpvue-picker>
    </view>
  </view>
</template>

<script>
import mpvuePicker from "../../components/mpvue-picker/mpvuePicker";

export default {
  components: {
    mpvuePicker,
  },
  data() {
    return {
      src: "",
      pickerValueArray: [],
      mode: "",
      deepLength: 1,
      fpickerValueArray: [
        {
          label: "大陆居民身份证",
          value: "1",
        },
        {
          label: "港澳台身份证",
          value: "2",
        },
        {
          label: "外国人永久居留身份证",
          value: "3",
        },
        {
          label: "其他证件",
          value: "4",
        },
      ],
      fpickerValueDefault: [0],
      cardTypeName: "大陆居民身份证",
      cardType: "1",
      success: false,
      accesstoken: "",
      detail: "",
    };
  },
  onLoad() {
    // this.gettoken();
  },
  methods: {
    check() {
      if (!this.detail.name) {
        uni.showToast({
          icon: "none",
          title: "请填写真实姓名",
          duration: 2000,
        });
        return;
      }
      if (this.cardType == 1) {
        if (
          !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
            this.detail.id
          )
        ) {
          uni.showToast({
            icon: "none",
            title: "身份证格式错误",
            duration: 2000,
          });
          return;
        }
      }
      if (this.cardType == 2 || this.cardType == 3 || this.cardType == 4) {
        if (!this.detail.id) {
          uni.showToast({
            icon: "none",
            title: "请填写证件号码",
            duration: 2000,
          });
          return;
        }
      }

      uni.navigateTo({
        url:
          "/pages/camera/camera?user=" +
          JSON.stringify({
            username: this.detail.name,
            card: this.detail.id,
            cardType: this.cardType,
            addr: this.detail.addr,
          }),
      });
    },
    onRoleConfirm(e) {
      this.cardTypeName = e.label;
      this.cardType = e.value[0];
    },

    showRolePicker() {
      this.mode = "selector";
      this.deepLength = 1;
      // this.pickerValueDefault = [1];
      this.$refs.fmpvuePicker.show();
    },
    gettoken() {
      this.$http
        .get(
          "/wx/applets/accessToken",
          {
            appFlag: 1
          },
          {
            header: {
              "content-type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          this.accesstoken = data.data;
          if (data.code == 0) {
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    getpic() {
      uni.chooseImage({
        count: 1,
        // sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          var tempFilesSize = res.tempFiles[0].size;
          if (tempFilesSize > 1000000) {
            wx.showToast({
              title: "上传图片不能大于1M!", //标题
              icon: "none", //图标 none不使用图标，详情看官方文档
            });
            return;
          }
          console.log(res);
          console.log(JSON.stringify(res.tempFilePaths));
          uni.showLoading({
            title: "分析中",
            mask: true,
          });
          const uploadTask = uni.uploadFile({
            url: this.uploadimg + "/wx/applets/ocrIdcard",
            filePath: res.tempFilePaths[0],
            name: "file",
            header: {
              token: uni.getStorageSync("token"),
            },
            formData: {
              appFlag: 1
            },
            success: (uploadFileRes) => {
              uni.hideLoading();
              console.log(uploadFileRes.data);
              let data = JSON.parse(uploadFileRes.data);
              if (data.code == 0) {
                if (data.data.errcode == 0) {
                  this.detail = data.data;
                  this.success = true;
                  uni.showToast({
                    title: "分析成功",
                    duration: 2000,
                  });
                } else {
                  uni.showToast({
                    title: "分析失败，请重试",
                    duration: 2000,
                    icon: "none",
                  });
                }
              } else {
                uni.showToast({
                  title: "分析失败，请重试",
                  duration: 2000,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.page {
  padding-top: 40rpx;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.card1 {
  width: 702rpx;
  height: 906rpx;
  background: #ffffff;
  border-radius: 32rpx;
  margin: auto;
  margin-top: 40rpx;
  padding-top: 90rpx;
}
.detailbox {
  width: 621rpx;
  height: 341rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  margin: auto;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card1 .item {
  font-size: 32rpx;
  font-weight: 500;
  color: #797979;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
}
.tip {
  font-size: 24rpx;
  font-weight: 500;
  color: #ff9125;
  padding-left: 47rpx;
  margin-top: 28rpx;
}
.card1 .btn {
  width: 620rpx;
  height: 88rpx;
  background: #4382ff;
  box-shadow: 0px 7rpx 10rpx 0px rgba(67, 130, 255, 0.34);
  border-radius: 16rpx;
  margin: auto;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 181rpx;
}
.card1 .icon {
  height: 34rpx;
  width: 34rpx;
  margin-right: 5px;
}
.card2 {
  width: 702rpx;
  height: 906rpx;
  background: #ffffff;
  border-radius: 32rpx;
  margin: auto;
  padding-top: 90rpx;
}
.card2 .icon {
  height: 34rpx;
  width: 34rpx;
  margin-right: 5px;
}
.input {
  width: 621rpx;
  height: 88rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}
.textarea {
  width: 621rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  margin: auto;
  display: flex;
  padding: 27rpx 20rpx;
  margin-bottom: 20rpx;
}
.textarea textarea {
  height: 138rpx;
  font-size: 32rpx;
  color: #797979;
}
.input input {
  flex: 1;
  font-size: 32rpx;
  font-weight: 500;
  color: #797979;
}
.xia {
  width: 23rpx;
  height: 23rpx;
}
.card2 .select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 621rpx;
  height: 88rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  margin: auto;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}
.card2 .selectleft {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #797979;
}
.btnbox {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  padding: 0 40rpx;
  margin-top: 70rpx;
}
.btn1 {
  width: 284rpx;
  height: 88rpx;
  background: #ff9125;
  box-shadow: 0px 7rpx 10rpx 0px rgba(255, 145, 37, 0.34);
  border-radius: 16rpx;
  align-items: center;
  justify-content: center;
  display: flex;
}
.btn2 {
  width: 284rpx;
  height: 88rpx;
  background: #4382ff;
  box-shadow: 0px 7px 10px 0px rgba(67, 130, 255, 0.34);
  border-radius: 16rpx;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>
